<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
      name="viewport"
    />
    <title>标题</title>
    <style>
      #editor {
        padding: 5px;
        border: 1px solid red;
        height: 300px;
        width: 700px;
      }
    </style>
  </head>
  <body>
    <button id="btn"></button>
    <div id="editor" contenteditable="true"></div>
    <script>
      var currentRange,
        _parentElem,
        supportRange = typeof document.createRange === "function";
      function $(a) {
        return document.getElementById(a);
      }
      function () {
        var selection, range;
        if (supportRange) {
          selection = document.getSelection();
          if (selection.getRangeAt && selection.rangeCount) {
            range = document.getSelection().getRangeAt(0);
            _parentElem = range.commonAncestorContainer;
          }
        } else {
          range = document.selection.createRange();
          _parentElem = range.parentElement();
        }

        return range;
      }
      function saveSelection() {
        currentRange = getCurrentRange();
      }
      function restoreSelection() {
        if (!currentRange) {
          return;
        }
        var selection, range;
        if (supportRange) {
          selection = document.getSelection();
          selection.removeAllRanges();
          selection.addRange(currentRange);
        } else {
          range = document.selection.createRange();
          range.setEndPoint("EndToEnd", currentRange);
          if (currentRange.text.length === 0) {
            range.collapse(false);
          } else {
            range.setEndPoint("StartToStart", currentRange);
          }
          range.select();
        }
      }
      function insertImage(html) {
        restoreSelection();
        if (document.selection) {
          console.log(111);
          currentRange.pasteHTML(html);
        } else {
          console.log(111);
          document.execCommand("insertImage", true, html);
        }
        saveSelection();
      }
      var btn = document.getElementById("btn");
      var editor = document.getElementById("editor");
      btn.onclick = function () {
        insertImage(`<img $title='sdadsdawdwad45' src='2.gif'>`);
      };
      editor.onmouseup = function () {
        saveSelection();
      };
      editor.onkeyup = function () {
        saveSelection();
      };
    </script>
  </body>
</html>
